import React from 'react';
import { Button, Box } from '@mui/material';
import { useAppSelector, useAppDispatch } from '../../redux/hooks';
import { createNetwork, showNetwork, simulateNetwork, createAndSimulateNetwork } from '../../redux/slices/generalSlice';
import { editModel } from '../../redux/slices/generalSlice';
import { openLaunchDialog } from '../../redux/slices/experimentsSlice';
import { TOPBAR_CONSTANTS, MODEL_STATE } from '../../constants';
import Icon from '../general/NetPyNEIcons';
// SplitButton will be migrated later
// import SplitButton from '../general/SplitButton';

const CREATE_NETWORK = 'CREATE NETWORK';
const CREATE_AND_SIMULATE = 'CREATE AND SIMULATE';
const SIMULATE = 'SIMULATE';
const BACK_TO_EDIT = 'BACK TO EDIT';
const BACK_TO_EXPLORER = 'GO TO EXPLORER';
const UPDATE_NETWORK = 'UPDATE NETWORK';

const editOptions = [CREATE_NETWORK, CREATE_AND_SIMULATE, SIMULATE];
const instantiatedEditOptions = [UPDATE_NETWORK, CREATE_AND_SIMULATE, SIMULATE];
const exploreOptions = [SIMULATE, CREATE_AND_SIMULATE];

const SwitchPageButton: React.FC = () => {
  const dispatch = useAppDispatch();
  const { editModelPage, modelState, experimentInDesign } = useAppSelector((state: any) => ({
    editModelPage: state.general.editMode,
    modelState: state.general.modelState,
    experimentInDesign: state.experiments.inDesign != null,
  }));

  const handleClick = (selectedOption: string): void => {
    if (selectedOption === CREATE_NETWORK || selectedOption === UPDATE_NETWORK) {
      dispatch(createNetwork());
    } else if (selectedOption === SIMULATE) {
      if (experimentInDesign) {
        dispatch(openLaunchDialog());
      } else {
        dispatch(simulateNetwork());
      }
    } else if (selectedOption === CREATE_AND_SIMULATE) {
      if (experimentInDesign) {
        dispatch(openLaunchDialog());
      } else {
        dispatch(createAndSimulateNetwork());
      }
    } else if (selectedOption === BACK_TO_EDIT) {
      dispatch(editModel());
    } else {
      dispatch(showNetwork());
    }
  };

  const instantiated = modelState === MODEL_STATE.INSTANTIATED;

  return (
    <Box
      sx={{
        display: 'flex',
        height: '100%',
        '& .MuiButton-root': {
          borderRadius: 0,
          marginBottom: 0,
        },
      }}
    >
      {editModelPage ? (
        <>
          <Button
            variant="contained"
            onClick={() => handleClick(BACK_TO_EXPLORER)}
            startIcon={<Icon name="screen" selected={false} />}
            disabled={!instantiated}
            sx={{
              textTransform: 'uppercase',
              letterSpacing: 2,
              fontSize: '1rem',
              borderRadius: 0,
            }}
          >
            {BACK_TO_EXPLORER}
          </Button>
          {/* SplitButton will be added when migrated */}
          {/* <SplitButton
            options={instantiated ? instantiatedEditOptions : editOptions}
            handleClick={handleClick}
            ...
          /> */}
        </>
      ) : (
        <Button
          variant="contained"
          onClick={() => handleClick(BACK_TO_EDIT)}
          startIcon={<Icon name="edit" selected={false} />}
          sx={{
            textTransform: 'uppercase',
            letterSpacing: 2,
            fontSize: '1rem',
            borderRadius: 0,
          }}
        >
          {BACK_TO_EDIT}
        </Button>
      )}
    </Box>
  );
};

export default SwitchPageButton;

